<template>
  <div class="app-container">
    <el-card style="width: 100%">
      <span v-if="product">
        <el-descriptions>
          <el-descriptions-item label="产品名称">{{ product.product_name }}</el-descriptions-item>
          <el-descriptions-item label="产品编号">{{ product.product_no }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <span v-if="productComponent">
          <component
            v-bind:is="productComponent"
            ref="products"
            :product.sync="product"></component>
        </span>
        <span v-else>
          <el-empty description=""></el-empty>
        </span>
      </span>
      <span v-else>
        <el-empty description=""></el-empty>
      </span>
    </el-card>
  </div>
</template>
<script>
import CryptoJS from 'crypto-js';
import { getProductDetail } from '@/api/product';
import TableList from '@/components/TableList/index';
import { productNoListOptions } from '@/views/product/record/data';
export default {
  name: 'list',
  components: {
    TableList,
  },
  data() {
    return {
      product: null,
      productComponentUrl: null,
    };
  },
  computed: {
    // 产品组件
    productComponent() {
      if (this.productComponentUrl == null) {
        return '';
      }
      return resolve => {
        require(['@/views/product/record/components/' + this.productComponentUrl + '.vue'], resolve);
      };
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let params = this.$route.query.key;
      var words = CryptoJS.enc.Base64.parse(params);
      let res = words.toString(CryptoJS.enc.Utf8);
      let productId = res.split('-')[0];
      this.getProductDetailAction(productId);
    },
    getProductDetailAction(productId) {
      getProductDetail({ id: productId }).then(res => {
        this.searchConditions = { product_no: res.data.product_no };
        this.$set(this, 'product', res.data);
        document.title = '使用记录-'+ this.product.product_no
        // 根据产品计算组件
        let productNoInfo = productNoListOptions.find(el => el.value == this.product.product_no);
        if (productNoInfo) {
          this.$set(this, 'productComponentUrl', productNoInfo.route);
        }
      });
    },
  },
};
</script>